<template>
    <div class="h-screen absolute top-0 left-0 w-screen">
        <ParticlesBg class="absolute inset-0" :quantity="100" :ease="100" :color="isDark ? '#FFF' : '#fff'"
            :staticity="10" refresh />
    </div>
    <UContainer class="flex flex-col">
        <AppHeader :links="navLinks"></AppHeader>
        <slot />
        <Footer>
            Footer
        </Footer>
    </UContainer>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "#imports";
import { buildNavLinks } from "~/utils/links";
import AppHeader from "~/components/AppHeader/AppHeader.vue";
import ParticlesBg from "~/components/ui/particles-bg/ParticlesBg.vue";

const colorMode = useColorMode();
const isDark = computed(() => colorMode.value === "dark");

const { t } = useI18n();
const navLinks = computed(() => buildNavLinks(t));
</script>

<style scoped></style>